<template>
  <div class="driver">
    <div class="driver-top">
      <p>司机管理</p>
      <span
        :class="titleChoose == i ? 'choosed' : ''"
        @click="changeChoose(i)"
        v-for="(ele, i) in titleState"
        :key="i"
        >{{ ele }}</span
      >
    </div>
    <div class="driver-filter">
      <el-button round @click="dialogVisible = true">添加</el-button>
      <el-input
        prefix-icon="el-icon-search"
        placeholder="请输入内容"
        v-model="filters.search"
      ></el-input>
      <el-button round>搜索</el-button>
    </div>
    <div class="driver-table">
      <CostomTable
        :pagination="pagination"
        :nameData="nameData"
        :tableData="tableData"
        :operating="operating"
        :currentChange="currentChange"
      />
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <div class="myDialog">
        <p class="myDialog-title">车辆添加</p>
        <div class="myDialog-info">
          <div
            class="myDialog-info-template"
            v-for="(ele, i) in myDialog"
            :key="i"
          >
            <p class="myDialog-info-template-first">{{ ele.title }}</p>
            <el-input
              v-if="ele.type == 'input'"
              v-model="ele.value"
              :placeholder="'请输入' + ele.title"
            ></el-input>
            <el-date-picker
              v-if="ele.type == 'date'"
              value-format="yyyy年MM月dd日"
              v-model="ele.value"
              type="date"
              :placeholder="'请选择' + ele.title"
            ></el-date-picker>
            <div v-if="ele.type == 'radio'">
              <el-radio
                v-for="(_ele, _i) in ele.valueData"
                :key="_i"
                v-model="ele.value"
                :label="_ele"
                >{{ _ele }}</el-radio
              >
            </div>
            <el-select
              v-if="ele.type == 'select'"
              v-model="ele.value"
              placeholder="请选择"
            >
              <el-option
                v-for="item in ele.valueData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addtionF(dialogVisible)"
              >确 定</el-button
            >
          </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CostomTable from "../../components/costomTable";
export default {
  data() {
    return {
      titleState: ["全部", "工作中", "空闲"],
      titleChoose: 0,
      filters: {
        time: "",
        search: "",
      },
      nameData: [
        { label: "司机姓名", property: "name" },
        { label: "性别", property: "sex" },
        { label: "状态", property: "status" },
        { label: "身份证号", property: "idCard" },
        { label: "驾龄", property: "age" },
        { label: "驾照级别", property: "level" },
        { label: "通讯地址", property: "driverLicenseNo" },
        { label: "联系电话 ", property: "mobile" },
      ],
      tableData: [],
      operating: [{ name: "编辑",fun:this.editer }, { name: "删除",fun:this.deleteF }],
      dialogVisible: false,
      myDialog: [
        { title: "姓名:", type: "input", value: "", bind: "name" },
        {
          title: "性别:",
          type: "radio",
          value: "",
          valueData: ["男", "女"],
          bind: "sex",
        },
        { title: "身份证号:", type: "input", value: "", bind: "idCard" },
        {
          title: "驾驶证号:",
          type: "input",
          value: "",
          bind: "driverLicenseNo",
        },
        {
          title: "驾龄:",
          type: "select",
          value: "",
          valueData: [
            { label: "1-3年", value: 0 },
            { label: "3-10年", value: 1 },
            { label: "10年以上", value: 2 },
          ],
          bind: "age",
        },
        {
          title: "驾照级别:",
          type: "select",
          value: "",
          valueData: [
            { label: "A照", value: "A" },
            { label: "B照", value: "B" },
          ],
          bind: "level",
        },
        // { title: "备注:", type: "input", value: "", bind: "commit" },
        { title: "联系电话:", type: "input", value: "", bind: "mobile" },
        { title: "其他号码:", type: "input", value: "", bind: "otherMobile" },
        { title: "通讯地址:", type: "input", value: "", bind: "address" },
      ],
      pageNum: 1,
      pagination: 1,
      whoClick:0,  //0 is add 1 is edit
    };
  },
  components: {
    CostomTable,
  },
  methods: {
    changeChoose(i) {
      this.titleChoose = i;
      this.getData();
    },
    addtionF(dialogVisible) {
      dialogVisible = false;
      
      let tempTable = {};
      let next = this.myDialog.some((ele, index) => {
        if (ele.value === "") {
          this.$message({
            message: "请输入" + ele.title,
            offset: 300,
          });
          return true;
        } else {
          tempTable[ele.bind] = ele.value;
        }
      });
      if (!next) {
        // console.log(tempTable);
        tempTable.sex = tempTable.sex == "男" ? 1 : 0;
        this.axios("post", this.inter.postDriverAdd, tempTable).then((res) => {
          this.$message({
            message: "添加成功",
            offset: 300,
          });
          this.getData();
        });
        // this.tableData.push(tempTable);
        this.dialogVisible = false;
      }
    },
    getData() {
      this.axios("get", this.inter.getAllDriver, {
        pageNum: this.pageNum,
        pageSize: 10,
        status: this.titleChoose == 0 ? null : this.titleChoose,
      }).then((res) => {
        this.tableData = [];
        this.pagination = res.total;
        this.tableData = res.list;
        // res.list.filter(item=>{
        //   this.tableData.push({
        //     name:item.name,
        //     sex:item.sex==1?'男':'女',

        //   })
        // })
      });
    },
    currentChange(page) {
      console.log(page);
      this.pageNum = page;
      this.getData();
    },
    deleteF(index){
      this.axios("post",this.inter.postDelete + this.tableData[index].id).then(res=>{
        this.$message({
          message:'删除成功',
          offset:300
        })
        this.getData()
      })
    },
    editer(index){
      let objelist =  Object.keys(this.tableData[index]);
      this.myDialog.filter(item=>{
       objelist.filter(_item=>{
         if(item.bind == _item){
            item.value = this.tableData[index][_item]
           if(_item == 'sex'){
             item.value = this.tableData[index][_item]==0?'女':'男'
           }
           if(_item == 'level'){
             item.value = this.tableData[index][_item]==0?'A':'B'
           }
         }
       })
      })
      this.dialogVisible = true
    }
  },
  mounted() {
    this.changeChoose(0);
    this.getData();
  },
};
</script>

<style lang='scss' scoped>
.driver {
  .myDialog {
    .dialog-footer {
      .el-button {
        margin-right: 0.2rem;
      }
      margin-top: 0.2rem;
      display: flex;
      flex-direction: row-reverse;
    }
    &-info-template {
      div {
        display: flex;
        width: 80%;
      }
      &-first {
        width: 40%;
        text-align: left;
      }
      display: flex;
      justify-content: space-between;
      white-space: nowrap;
      align-items: center;
      padding: 0 0.2rem;
      background: #f5f5f5;
      margin-top: 0.2rem;
    }
    &-title {
      background: #006ab4;
      color: #fff;
      text-align: left;
      padding: 0.1rem 0.2rem;
    }
    background: #f4f4f4;
    padding-bottom: 0.2rem;
    &-info {
      max-height: 60vh;
      overflow-y: scroll;
    }
  }
  &-table {
    height: 80vh;
    overflow-y: scroll;
    margin: 0.1rem;
  }
  &-filter {
    .el-button {
      background: #006ab4;
      color: #fff;
    }
    .el-date-editor {
      width: 2.5rem;
    }
    .el-input {
      width: 2rem;
      margin-left: auto;
      margin-right: 0.2rem;
    }
    background: #fff;
    margin: 0.1rem;
    padding: 0.1rem 0.2rem;
    display: flex;
  }
  &-top {
    .choosed {
      color: #006ab4;
    }
    p {
      font-weight: bold;
    }
    span {
      margin-left: 0.4rem;
      color: #999;
      cursor: pointer;
    }
    padding: 0.2rem;
    display: flex;
    background: #fff;
    margin: 0.1rem;
  }
}
</style>

<style lang="scss">
.driver {
  .el-input__inner {
    border: none;
  }
  .el-dialog__header {
    display: none !important;
  }
  .el-dialog__body {
    padding: 0;
  }
}
</style>